<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"  xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="centre/manage/include :: header">
</head>

<link rel="stylesheet" type="text/css" href="/css/plugins/layui/layui.css"/>

<style>
    h3, h4, h5 {
        margin: 5px 0;
        font-weight: 600;
    }

    input[type=email], input[type=url], input[type=search], input[type=tel],
    input[type=color], input[type=text], input[type=password], input[type=datetime],
    input[type=datetime-local], input[type=date], input[type=month], input[type=time],
    input[type=week], input[type=number], textarea {
        border-radius: 0 !important;
        color: #858585;
        background-color: #FFF;
        border: 1px solid #D5D5D5;
        padding: 5px 4px 6px;
        font-size: 14px;
        font-family: inherit;
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
        -webkit-transition-duration: .1s;
        transition-duration: .1s;
    }

    select {
        padding: 3px 4px;
        height: 30px;
    }

    .table {
        margin-bottom: 0px;
        /* table-layout: fixed; */
    }

</style>
<body class="gray-bg">
<div class="wrapper wrapper-content">
    <div class="row">
        <div class="col-sm-12">
            <div class="panel panel-info">
                <div class="panel-heading">查询商品销售量和销售额明细</div>
                <div class="panel-body">
                    <div class="form-horizontal">
                        <div class="form-group" style="padding-left:60px;">
                            <div class="col-xs-12 col-sm-3 hidden-xs btn-sespan">
                                <div class="input-group">
							<span class="input-group-addon" style="height:30px;">
								付款时间
							</span>
                                    <input type="text" name="payStartTime" id="payStartTime"
                                           value="" placeholder="点击选择开始时间"
                                           readonly class="datetimepicker form-control"
                                           style="height:30px;"/>
                                    <span>
								<i class="fa fa-exchange"></i>
							</span>
                                    <input type="text" name="payEndTime" id="payEndTime"
                                           value="" placeholder="点击选择结束时间"
                                           readonly class="datetimepicker form-control"
                                           style="height:30px;"/>

                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-4 hidden-xs btn-sespan">
                                <div class="input-group">
							<span class="input-group-addon" style="height:30px;">
								商品名称
							</span>
                                    <input name="productName" id="productName" type="text"
                                           class="form-control" value="" placeholder="输入需查询的商品名称">
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-5 hidden-xs btn-sespan">
                                <input type="hidden" id="centreId" name="centreId" th:value="${centreId}" th:if="${flag} == '1'">
                                <div class="col-xs-12 col-sm-5 hidden-xs btn-sespan" th:if="${flag} == '0'">
                                    <select data-placeholder="商户" class="form-control chosen-select" id="centreId"
                                            name="centreId" tabindex="2" onchange="renderCategoryThird(this)">
                                        <option value="">选择商户</option>
                                        <option th:each="item: ${centreList}" th:text="${item.name}"
                                                th:value="${item.centreId}"></option>
                                    </select>
                                </div>
                            </div>

                            <div class="col-xs-12 col-sm-5 hidden-xs btn-sespan">
                                <select  id="liansuoid"
                                        class="form-control chosen-select" tabindex="2">
                                    <option value="" selected="selected">选择门店</option>
                                    <option th:each="item: ${teams}" th:text="${item.tXiaoqu+ +item.id}"
                                            th:value="${item.id}"></option>
                                </select>
                            </div>

                            <div class="col-xs-12 col-sm-2 hidden-xs btn-sespan">
                                <select id="isSource"
                                        class="form-control chosen-select" tabindex="2">
                                    <option value="">选择订单商品来源</option>
                                    <option value="0">非门店</option>
                                    <option value="1">门店</option>
                                </select>
                            </div>

                        </div>
                        <div class="form-group">
                            <label class="col-xs-12 col-sm-2 col-md-2 col-lg-1 control-label">排序方式</label>
                            <div class="col-sm-8 col-lg-9 col-xs-12">
                                <label class='radio-inline'>
                                    <input type='radio' name='column' value='price'/> 按销售额
                                </label>
                                <label class='radio-inline'>
                                    <input type='radio' name='column' value='total' checked/> 按销售量
                                </label>
                                <label class='radio-inline'>
                                    <input type='radio' name='column' value='pay_time'/> 按付款时间
                                </label>
                            </div>
                        </div>


                        <div class="form-group">
                            <label class="col-xs-12 col-sm-2 col-md-2 col-lg-1 control-label"></label>
                            <div class="col-sm-8 col-lg-9 col-xs-12">
                                <button class="btn btn-default" onclick="reLoad()">
                                    <i class="fa fa-search"></i> 搜索
                                </button>
                                <button type="button" class="btn btn-default" onclick="exportExcel()"
                                        style='margin-left:10px;'>
                                    <span class="fa fa-download"></span>
                                    导出Excel
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="panel panel-default">
                <div class="panel-heading">
                    总交易单数: <span style='color:red' id="zj"></span>
                    <!-- 当前页合计:数量 <span style='color:red' id="shuliang"></span>
                    金额: <span style='color:red' id="jine"></span> -->
                </div>

                <div class="panel-body" style="padding: 0;">
                    <table id="productSaleTable" data-mobile-responsive="true">
                    </table>
                    <!-- <table class="table table-hover">
                        <thead class="navbar-inner">
                            <tr>
                                <th>订单号</th>
                                <th>商品名称</th>
                                <th>数量</th>
                                <th>价格</th>
                                <th>下单时间</th>
                                <th>付款时间</th>
                                <th>下单人</th>
                                <th>电话</th>
                                <th>门店姓名</th>
                                <th>小区</th>
                                <th>供应商</th>
                            </tr>
                        </thead>
                        <tbody id="ajax-data">
                            <tr>
                                <td>D18082115582365209</td>
                                <td><img src="http://pic.jinzhishenghuo.com/data/upload/images/2018-08-21/IZZxkTiakbvSgqqETMfmvfGmrGkIvL.png"
                                        style="width: 30px; height: 30px;border:1px solid #ccc;padding:1px;">可可小镘头1包</td>
                                <td>5</td>
                                <td>0.10</td>
                                <td>2018-08-21 15:58:24</td>
                                <td>2018-08-21 15:58:51</td>
                                <td>云峰</td>
                                <td>13354887160</td>
                                <td>谢总[107072]</td>
                                <td>团结小区</td>
                                <td>张三食品</td>
                            </tr>
                            <tr><td height="50" colspan="2" align="right" style="">当前页合计:</td>
                                <td><label class="btn btn-minier btn-info"> 50 </label></td>
                                <td><label class="btn btn-minier btn-success"> ¥0.86 </label></td>
                                <td colspan="7"></td>
                            </tr>
                            <tr>
                                <td height="50" colspan="2" align="right" onclick="look();" style="color:#428BCA;text-decoration: underline;">查看总合计:</td>
                                <td style="display:none;" class="num">
                                    <label class="btn btn-minier btn-info sumnum" >  </label>
                                </td>
                                <td style="display:none;" class="num">
                                    <label class="btn btn-minier btn-success sumPrice" > </label>
                                </td>
                                <td colspan="7"></td>
                            </tr>
                            <tr>
                                <td height="50" colspan="12" align="left">
                                    <ul class="pagination">
                                        <li class="disabled"><span>&laquo;</span></li>
                                        <li class="active"><span>1</span></li>
                                        <li><a href='javascript:ajax_page(2);'>2</a>
                                        </li><li><a href='javascript:ajax_page(3);'>3</a></li>
                                        <li><a href='javascript:ajax_page(4);'>4</a></li>
                                        <li><a href='javascript:ajax_page(2);'>&raquo;</a></li>
                                    </ul>
                                </td>
                            </tr>
                        </tbody>
                    </table> -->
                </div>
            </div>
        </div>

    </div>
</div>
<div th:include="centre/manage/include::footer"></div>
<script type="text/javascript" src="/public/ace/js/ace-extra.js"></script>
<script type="text/javascript" src="/js/plugins/layui/layui.js"></script>
<script type="text/javascript">
    function closeDow() {
        var index = parent.layer.getFrameIndex(window.name); // 获取窗口索引
        parent.layer.close(index);
    }

    layui.use('laydate', function () {
        var laydate = layui.laydate;
        laydate.render({
            elem: '#payStartTime', type: 'datetime'
        });

        laydate.render({
            elem: '#payEndTime', type: 'datetime'
        });
    })

    var prefix = "/report/manage";
    $(document).ready(function () {
        load();
    });

    function load() {
        $.ajax({
            url: prefix + "/productSaleZj",
            contentType: "application/json",
            dataType: "json",
            data: {
                "payStartTime": $.trim($("#payStartTime").val()),
                "payEndTime": $.trim($("#payEndTime").val()),
                "productName": $.trim($("#productName").val()),
                "column": $.trim($('input[name="column"]:checked').val()),
                centreId: $.trim($("#centreId").val()),
                liansuoid: $.trim($("#liansuoid").val()),
                isSource: $.trim($("#isSource").val())
            },
            success: function (r) {
                $("#zj").html(r);
            }
        })

        $('#productSaleTable').bootstrapTable({
            method: 'get', // 服务器数据的请求方式 get or post
            url: prefix + "/productSale", // 服务器数据的加载地址
            showRefresh: true,
            // showToggle : true,
            iconSize: 'outline',
            // toolbar: '#exampleToolbar',
            striped: true, // 设置为true会有隔行变色效果
            dataType: "json", // 服务器返回的数据类型
            pagination: true, // 设置为true会在底部显示分页条
            pageList: [10, 20, 50],
            // queryParamsType : "limit",
            // //设置为limit则会发送符合RESTFull格式的参数
            singleSelect: false, // 设置为true将禁止多选
            // contentType : "application/x-www-form-urlencoded",
            // //发送到服务器的数据编码类型
            pageSize: 10, // 如果设置了分页，每页数据条数
            pageNumber: 1, // 如果设置了分布，首页页码
            // search : true, // 是否显示搜索框
            showColumns: true, // 是否显示内容下拉框（选择显示的列）
            showFooter: true,
            sidePagination: "server", // 设置在哪里进行分页，可选值为"client" 或者
            // "server"
            queryParams: function (params) {
                return {
                    limit: params.limit,
                    offset: params.offset,
                    payStartTime: $.trim($("#payStartTime").val()),
                    payEndTime: $.trim($("#payEndTime").val()),
                    productName: $.trim($("#productName").val()),
                    column: $.trim($('input[name="column"]:checked').val()),
                    centreId: $.trim($("#centreId").val()),
                    liansuoid: $.trim($("#liansuoid").val()),
                    isSource: $.trim($("#isSource").val())
                };
            },
            columns: [
                {
                    title: '订单号',
                    field: 'ordersn',
                    //width: '10%'
                }, {
                    title: '所属商户',
                    field: 'supplyName',
                    //width: '8%'
                }, {
                    title: '所属门店',
                    field: 'tXiaoqu',
                    //width: '10%'
                },
                {
                    title: '商品名称',
                    field: 'productName',
                    width: '200'
                }, {

                    title: '规格名称',
                    field: 'optionname'
                }, {
                    title: '销售数量',
                    field: 'total',
                    //width: '5%' ,
                    formatter: function (value, row, index) {
                        return value;
                    }
                }, {
                    title: '成交金额(元)',
                    field: 'price',
                    //width: '5%' ,
                    formatter: function (value, row, index) {
                        return value;
                    }
                }, {
                    title: '销售金额(元)',
                    field: 'marketprice',
                    formatter: function (value, row, index) {
                        return value*row.total;
                    }
                }, {
                    title: '优惠金额(元)',
                    //width: '5%' ,
                    formatter: function (value, row, index) {
                        return (row.marketprice-row.price)*row.total;
                    }
                }, {
                    title: '状态',
                    field: 'status',
                    //width: '5%' ,
                    formatter: function (value, row, index) {
                        return value==1?'已付款':
                               value ==2?'已发货':
                               value == 3?'已收货':
                               value == 4?'待退款':
                               value == 5?'售后中':
                                   value == 6?'已完成':'退款成功';
                    }
                }
                , {
                    title: '下单时间',
                    field: 'createTime',
                    //width: '11%'
                }, {
                    title: '付款时间',
                    field: 'payTime',
                    //width: '11%'
                }, {
                    title: '下单人',
                    field: 'nickName',
                    //width: '5%'
                }, {
                    title: '电话',
                    field: 'phone',
                    //width: '5%'
                }]
        });
    }

    function reLoad() {
        load();
        $('#productSaleTable').bootstrapTable('refresh');
    }

    function exportExcel() {
        var payStartTime = $.trim($("#payStartTime").val());
        var payEndTime = $.trim($("#payEndTime").val());
        var productName = $.trim($("#productName").val());
        var column = $.trim($('input[name="column"]:checked').val());
        var centreId = $.trim($("#centreId").val());
        var liansuoid = $.trim($("#liansuoid").val());
        var isSource = $.trim($("#isSource").val());
        if (payStartTime == null || payStartTime == '' || payEndTime == null || payEndTime == '') {
            layer.msg("请选择时间");
            return;
        }
        window.location.href = prefix + "/exportProductSale?payStartTime=" + payStartTime +
            "&payEndTime=" + payEndTime + "&productName=" + productName +
            "&column=" + column +
            "&centreId=" + centreId + "&liansuoid=" + liansuoid
            + "&isSource=" + isSource;
    }

    function renderCategoryThird(obj) {
        var index = obj.options[obj.selectedIndex].value;
        var html = "<option value="">请选择门店</option>";
        if (index == 0) {
            $("#liansuoid").html(html);
        } else {
            $.ajax({
                url: "/commanderList/manage/listCommanders",
                data: {"centreId": index},
                dataType: "json",
                success: function (data) {
                    for (var i = 0; i < data.length; i++) {
                        html += '<option value="' + data[i].id + '">' + data[i].tXiaoqu + data[i].id + '</option>';
                    }
                    $("#liansuoid").html(html);
                }
            })
        }
    }
</script>

</body>
</html>
